<template>
  <div class="formStyle">
    <div class="comForm">
      <el-form
        ref="comForm"
        :label-position="labelPosition"
        :model="formData"
        :label-width="labelWidth"
      >
        <template v-for="(item, index) in config">
          <el-col
            :span="item.colSpan || 24"
            :key="index"
            :class="labelCalss(item)"
            v-if="showFormItem({ item, formData })"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="tooltipContent(item)"
              :placement="item.lacement || 'top'"
              :disabled="!Boolean(tooltipContent(item))"
            >
              <component
                :is="item.type + 'Com'"
                :ref="item.type + 'Com' + index"
                :key="item.label"
                :item="item"
                :formData="formData"
                :isReset="isReset"
                :itemIndex="index"
                @fold="fold(index)"
              />
            </el-tooltip>
          </el-col>
          <el-col
            :span="24"
            :key="index + 'divider'"
            v-if="item.divider && showFormItem({ item, formData })"
            ><el-divider></el-divider
          ></el-col>
        </template>
      </el-form>
      <div class="custom">
        <slot name="custom"></slot>
      </div>
    </div>
    <div v-if="!hideButton && buttons.length > 0" class="formButtons">
      <template v-for="(btn, index) in buttons">
        <el-button
          v-if="btn.show"
          size="medium"
          :type="btn.type || 'default'"
          :key="index"
          :class="btn.class"
          @click="
            () => {
              buttonFuc(btn);
            }
          "
          :accesskey="btn.accesskey"
        >
          {{ btn.label }}
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import constans from "../Core/json/constans";

import cascaderCom from "../Core/cascaderCom";
import checkboxButtonCom from "../Core/checkboxButtonCom";
import checkboxCom from "../Core/checkboxCom";
import inputRangeCom from "../Core/inputRangeCom";
import dateCom from "../Core/dateCom";
import dateRangeSingleCom from "../Core/dateRangeSingleCom";
import inputCom from "../Core/inputCom";
import inputTableCom from "../Core/inputTableCom";
import inputNumberCom from "../Core/inputNumberCom";
import inputNumberRangeCom from "../Core/inputNumberRangeCom";
import radioButtonCom from "../Core/radioButtonCom";
import radioCom from "../Core/radioCom";
import selectCom from "../Core/selectCom";
import selectMultipleCom from "../Core/selectMultipleCom";
import sliderCom from "../Core/sliderCom";
import switchCom from "../Core/switchCom";
import textareaCom from "../Core/textareaCom";
import textCom from "../Core/textCom";
import timeCom from "../Core/timeCom";
import uploadCom from "../Core/uploadCom";
import timeRangeSingleCom from "../Core/timeRangeSingleCom";
import selectCustomizeCom from "../Core/selectCustomizeCom";
import labelCom from "../Core/labelCom";
import titleCom from "../Core/titleCom";
import buttonCom from "../Core/buttonCom";
import complexUploadCom from "../Core/complexUploadCom";
import tableListCom from "../Core/tableListCom";
import transferCom from "../Core/transferCom";
import tagCom from "../Core/tagCom";

export default {
  name: "com-form",
  components: {
    cascaderCom,
    checkboxButtonCom,
    checkboxCom,
    inputRangeCom,
    dateCom,
    dateRangeSingleCom,
    inputCom,
    inputTableCom,
    inputNumberCom,
    inputNumberRangeCom,
    radioButtonCom,
    radioCom,
    selectCom,
    selectMultipleCom,
    sliderCom,
    switchCom,
    textareaCom,
    textCom,
    timeCom,
    uploadCom,
    timeRangeSingleCom,
    selectCustomizeCom,
    labelCom,
    titleCom,
    buttonCom,
    complexUploadCom,
    tableListCom,
    transferCom,
    tagCom
  },
  props: {
    config: {
      type: Array,
      default: () => {
        return [];
      }
    },
    labelPosition: {
      type: String,
      default: () => {
        return "left";
      }
    },
    hideButton: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    labelWidth: {
      type: String,
      default: () => {
        return "auto";
      }
    },
    buttons: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      constans,
      isReset: false
    };
  },
  methods: {
    //按钮
    buttonFuc(button) {
      let self = this,
        btn = button;
      if (btn && btn.isCheck) {
        this.$refs.comForm.validate(valid => {
          if (valid) {
            btn.func(self.formData);
          } else {
            return false;
          }
        });
      } else if (btn && btn.cancel) {
        let self = this;
        // 取消按钮是否需要不重置功能，默认重置
        if (!btn.noReset) {
          self.$refs.comForm.resetFields();
          self.isReset = true;
          setTimeout(() => {
            self.isReset = false;
          }, 1000);
        }
        btn.func(this.formData);
      } else {
        btn.func(this.formData);
      }
    },
    //提交方法
    submit(func) {
      let self = this;
      let _value;
      this.$refs.comForm.validate(valid => {
        if (valid) {
          func && func(self.formData);
          _value = valid;
        } else {
          return false;
        }
      });
      return _value;
    },
    cancel(func) {
      let self = this;
      self.$refs.comForm.resetFields();
      self.isReset = true;
      setTimeout(() => {
        self.isReset = false;
      }, 1000);
      func && func(self.formData);
    },
    tooltipContent(item) {
      return item.tooltip ? item.tooltip(this.formData, item) : null;
    },
    labelCalss(item) {
      if (!item.labelCalss) {
        return;
      }
      const type = typeof item.labelCalss;
      if (type == "string") {
        return item.labelCalss;
      } else if (type == "function") {
        return item.labelCalss(this.formData, item);
      }
    },
    showFormItem({ item, formData }) {
      const type = typeof item.show;
      if (type == "function") {
        return item.show(item, formData);
      } else {
        return !(item.show === false);
      }
    },
    fold(index) {
      let isFord = this.config[index + 1].show;
      if (isFord == undefined || typeof isFord == "undefined") {
        isFord = true;
      }
      this.config[index + 1].show = !isFord;
      this.$forceUpdate();
    }
  }
};
</script>
<style scoped lang="scss">
.formStyle {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #ffffff;
  clear: both;
  overflow: hidden;
  ::v-deep .el-form-item__content {
    .el-cascader,
    .my-popover-btn,
    .my-select,
    .mix > .el-date-editor.el-input,
    .el-input-number,
    .el-select,
    .el-dropdown {
      width: 100%;
    }

    .mix {
      > .valueRange {
        > div {
          width: 100%;
        }
      }

      > .valueRange.valueRange-middle {
        width: 6%;
        min-width: 15px;
      }
    }
  }
}

.formButtons {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
  padding-right: 32px;
}

::v-deep .el-form-item {
  margin-bottom: 15px;
  padding: 0 32px;

  .iconPos {
    display: none;
  }
}

// lable颜色的样式
::v-deep .danger {
  .el-form-item__label {
    color: #f56c6c !important;
  }
}

::v-deep .ok {
  .el-form-item__label {
    color: #67c23a !important;
  }
}

::v-deep .primary {
  .el-form-item__label {
    color: #1b65b9 !important;
  }
}

::v-deep .warring {
  .el-form-item__label {
    color: #e6a23c !important;
  }
}
</style>
